import React, { Component } from 'react'
import { TouchableOpacity, ActivityIndicator } from 'react-native'
import { Colors, Metrics } from '../Themes'
import Video from 'react-native-video'
import * as RootNavigation from '../Navigation/RootNavigation'

export default class VideoView extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isPlays: true,
            paused: props.paused == undefined ? true : props.paused,
            loadFinished: false,
        }  
    }

    _play() {
        if (Metrics.isIOS) {
            this.refs.video.presentFullscreenPlayer();
        }
        else {
            RootNavigation.navigate('VideoFull', { source: this.props.source })
            this.setState({ paused: true })
        }
    }

    render() {
        return (
            <TouchableOpacity onPress={() => this._play()} style={{ justifyContent:'center', alignItems:'center' }}>
                <Video
                    source={this.props.source}
                    style={{...this.props.style}}
                    ref='video'
                    paused={this.state.paused}
                    repeat={false}
                    resizeMode='cover'
                    onLoad={(payload) => {
                        console.log('onLoad')
                        console.log(payload)
                        this.setState({ loadFinished: true })
                    }}

                />
                {this.state.loadFinished ? null : <ActivityIndicator size="large" color={Colors.mainColor} style={{ position: 'absolute' }} />}
            </TouchableOpacity>
        )
    }

}